<template>
    <div>
		<el-row :gutter="20" class="listCard1" style="margin-top: 0;">
		    <el-col :span="16">
					<div class="topNum">
                         <div class="item">123</div>
						 <div class="item">123</div>
						 <div class="item">123</div>
						 <div class="item">123</div>
					</div>
		        <!-- <el-card class="box-card">
		            <div slot="header" class="clearfix">
		                <span>经营概况</span>
		            </div>
		            <el-row class="demo-color-box">
		                <el-col :span="7">
		                    <img width="40" src="../../../../assets/img/home-icon02.png" />
		                </el-col>
		                <el-col :span="13">
		                    用户数量
		                    <p>{{userNumber}}</p>
		                </el-col>
		            </el-row>
		            <el-row class="demo-color-box">
		                <el-col :span="8">
		                    <img width="40" src="../../../../assets/img/home-icon02.png" />
		                </el-col>
		                <el-col :span="14">
		                    企业数量
		                    <p>{{companyNumber}}</p>
		                </el-col>
		            </el-row>
		            <el-row class="demo-color-box">
		                <el-col :span="8">
		                    <img width="40" src="../../../../assets/img/home-icon02.png" />
		                </el-col>
		                <el-col :span="14">
		                    30天活跃用户数量
		                    <p>{{userActivation}}</p>
		                </el-col>
		            </el-row>
		            <el-row class="demo-color-box">
		                <el-col :span="7">
		                    <img width="40" src="../../../../assets/img/home-icon02.png" />
		                </el-col>
		                <el-col :span="16">
		                    30天活跃企业数量
		                    <p>{{companyActivations}}</p>
		                </el-col>
		            </el-row>
		        </el-card> -->
		    </el-col>
		    <el-col :span="8">
		        <el-card class="box-card">
		            <div slot="header" class="clearfix">
		                <span>消息中心</span>
		                <router-link to="/message"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
		            </div>

		            <!--<div v-for="(item,index) in messageData" :key="index" class="text item">-->
		            <div v-for="(item,index) in messageData" :key="index" style="display:flex;">
		                <span style="height: 30px; overflow:hidden; width:25%; display:inline-block;font-size:12px;">{{item.createtime}}</span>
		                <span style="font-size:12px;">{{item.content}}</span>
		            </div>
		        </el-card>
		    </el-col>
		</el-row>
		<el-row :gutter="20" class="listCard" >
			<el-col :span="16">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					    <span>整体趋势</span>
					    <!-- <router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link> -->
                        <div style="float: right;">
                            <el-button @click="addEnterprise">新增企业</el-button>
							<el-button @click="addUser">新增用户</el-button>
							<el-button @click="cumEnterprise">累计企业</el-button>
							<el-button @click="cumUser">累计用户</el-button>
                        </div>
                        <div id="myCharts" ref="myCharts" style="width:100%;height:180px;"></div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8" style="height:100px;">
			   <el-card class="box-card" >
			   		<span>使用指南</span>
					<div style="display:flex;margin-left:30px;align-items: center;justify-content: space-between;width:100%;">
			   			<div style="margin-top:15px;" @click="open">追溯控制中心产品使用手册</div>
						<div style="">
							<el-button type="primary" round @click="download" style="margin-top:15px;margin-right:30px;">点击下载</el-button>
						</div>
					</div>
			   </el-card>
				<el-card class="box-card" style="margin-top:20px;height:120px;padding:0;">
					<div style="100%">
						<img :src="img" alt="" :span="8" style="height:80px;width:100%;"	>
					</div>

				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20" class="listCard" >
			<el-col :span="8">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					    <span>扫码分布</span>
						<div id="mapData" style="width:100%;height:200px;"></div>
					    <!-- <router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link> -->
					</div>
				</el-card>
			</el-col>
			<el-col :span="16">
			   <el-card class="box-card" >
			   	<div slot="header" class="clearfix">
			   	    <span>打码统计</span>
			   	   	<div id="codeStatistics"  style="width:100%;height:200px;"></div>
			   	</div>
			   </el-card>

			</el-col>
		</el-row>
    </div>
</template>

<script>
	import * as echarts from 'echarts';
	import axios from "axios"
	import chinas from '../../../common/100000.json'
	import { systemLog_userActivation, systemLog_companyActivation,systemLog_userNumber,systemLog_companyNumber,systemLog_companyNewCompanys,systemLog_userNewUsers,systemLog_companyCumCompanys,systemLog_userCumUsers } from "@/request/supervisionCenterApi.js"
    export default {
        data(){
            return{
                userActivation: '',  //活跃用户
                companyActivations: '',   //活跃的企业
				userNumber: '',  // 用户数量
				companyNumber: '',  // 企业数量
				echartsData: [],
				monthData: [],
				echartsDatauser: [],
				echartsDataqiye: [],
				echartsDataYueUser: [],
				echartsDataNewqiye: [],
				messageData: [
					// {
					// 	createtime: '04/10',
					// 	content: '亲,你版本服务今天就到期'
					// },
					// {
					// 	createtime: '04/07',
					// 	content: '恭喜您,注册成功'
					// },
				],
				scanCodeData: [],
				img:''
            }
        },
        mounted(){
			this.ids = localStorage.getItem("companyId")
            this.inits()
			this.init2()
			this.init3()
			this.getadvert()
        },
        methods: {

			getadvert(){

				axios.get("http://grove.cpzsyun.com:81/api/control/advert/getByCompanyId/"+this.ids).then((res)=>{
				// axios.get("http://grove.cpzsyun.com:81/api/control/advert/getByCompanyId/"+this.ids).then((res)=>{
					// this.data3 = res.data.data
					this.img = "http://grove.cpzsyun.com:81/api/plant/file/show/"  + res.data.data.img
				})
			},
			open(){
				window.open("https://grove.cpzsyun.com:81/re/追溯控制中心用户使用手册.pdf")
			},
			//下载使用指南
			download(){
				window.location.href = "https://grove.cpzsyun.com:81/re/追溯控制中心用户使用手册.pdf"
			},
            inits() {
				//查看消息中心
				let data = {
					page: '1'
				}
				// axios.post("http://192.168.0.148:8880/control/news/inquire",data).then((res) =>{

				axios.post("http://grove.cpzsyun.com:81/api/control/news/inquire",data).then((res) =>{
					this.messageData = res.data.data
				})

				//查询30天活跃用户
                // systemLog_userActivation().then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/control/log/userActivation").then((res) =>{
                    this.userActivation = res.data.data
                })
				//查询30天内活跃的企业
                // systemLog_companyActivation().then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/control/log/companyActivation").then((res) =>{
                    this.companyActivations = res.data.data
                })
				//查询用户数量
                // axios.get("http://grove.cpzsyun.com:81/api/control/user/getUserNum").then((res) =>{
                axios.get("http://grove.cpzsyun.com:81/api/control/user/getUserNum").then((res) =>{
                    this.userNumber = res.data.data
                })
				//查询公司数量
                // axios.get("http://grove.cpzsyun.com:81/api/control/user/companyNumber").then((res) =>{
                axios.get("http://grove.cpzsyun.com:81/api/control/user/companyNumber").then((res) =>{
                    this.companyNumber = res.data.data
                })
				//新增月企业数量统计图
				// axios.post("http://192.168.0.148:8880/usercenter/company/newCompanys").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/usercenter/company/newCompanys").then((res) =>{
					// console.log(res.reverse());
					let resData = res.data.data
					this.echartsData = resData.reverse()

				var date = new Date();
				let month = date.getMonth()+1
				let i = month
				for(i; i>0 ; i--){
					this.monthData.push(i+'月')
				}

				let j = 12
				let k = month
				for(j; j>k;j--){
					this.monthData.push(j+'月')
				}
				this.monthData = this.monthData.reverse()


                // 基于准备好的dom，初始化echarts实例
				// console.log(this.$echarts);
                let myChart = echarts.init(document.getElementById('myCharts'))
                // 绘制图表
                myChart.setOption({
					tooltip: {},
                    xAxis: {
						data: this.monthData
                    },
                    yAxis: {},
					grid:{
						top:30,
						width:"auto",
						height: "70%"
					},
                    series: [{
						type: 'line',
                        data: this.echartsData
                        // data: [10,22,24,28,14,22,18,24,26,30,24,25]
                    }]
                });
				})
            },
			init2(){
				// axios.post("http://192.168.0.148:8880/plant/traceinfo/distribution").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/plant/traceinfo/distribution").then((res) =>{
					// console.log(res,'市扫码分布')
					// let resData = res.data.data
					// console.log(this.cityCode)
					var abc = res.data.data
					var keys=[];
					var values=[];
					var obj = abc
					for(var key in obj){
						keys.push(key);
						values.push(obj[key]);
					}
					let arr=[]
					for(var a=0;a<keys.length;a++){
						var object = {}
						object.name = keys[a]
						object.value = values[a]
						arr.push(object)
					}
					this.cityCode = arr
					// console.log(this.cityCode,'1212')


					let myEchartsss = echarts.init(document.getElementById("mapData"));
					var mapName = "china"
					echarts.registerMap(mapName, chinas);
					let option = {
						tooltip: {
							triggerOn: "click",
							formatter: function(e, t, n) {
								if(e.value){
									return .5 == e.value ? e.name + "：扫码量" : e.seriesName + "<br />" + e.name + "：" + e.value
								}else{
									return .5 == e.value ? e.name + "：扫码量" : e.seriesName + "<br />" + e.name + "：" + 0
								}
							}
						},
						visualMap: {
							min: 0,
							max: 1000,
							right: 5,
							bottom: 10,
							itemWidth:20,
							itemHeight:10,
							showLabel: !0,
							textStyle: {
								color:"#1E1E1E",
								fontSize: 10
							},
							// text: ["高", "低"],
							pieces: [{
								gt: 100,
								label: "> 100 ",
								color: "#7f1100"
							}, {
								gte: 10,
								lte: 100,
								label: "10 - 100 ",
								color: "#ff5428"
							}, {
								gte: 1,
								lt: 10,
								label: "1 - 9 ",
								color: "#ff8c71"
							}, {
								value: 0,
								color: "#ffffff"
							}],
							show: !0
						},
						geo: {
							map: mapName,
							roam: !1,
							scaleLimit: {
								min: 1,
								max: 2
							},
							zoom: 1.35,
							top: 40,
							label: {
								normal: {
									show: !0,
									fontSize: "6",
									color: "rgba(0,0,0,0.7)"
								}
							},
							itemStyle: {
								normal: {
									//shadowBlur: 50,
									//shadowColor: 'rgba(0, 0, 0, 0.2)',
									borderColor: "rgba(0, 0, 0, 0.2)"
								},
								emphasis: {
									areaColor: "#f2d5ad",
									shadowOffsetX: 0,
									shadowOffsetY: 0,
									borderWidth: 0
								}
							}
						},
						series: [{
							name: "扫码量",
							type: "map",
							map: mapName,
							geoIndex: 0,
							data:this.cityCode,
							top: '5',
							bottom: '10',
						}]

					};
					myEchartsss.setOption(option);
            	})
        	},
			//扫码量
			init3() {
				// axios.post("http://192.168.0.148:8880/plant/traceinfo/uniqueId").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/plant/traceinfo/uniqueId").then((res) =>{
					// console.log(res.reverse());
					let resDatas = res.data.data
					this.scanCodeData = resDatas.reverse()

					let myEchart = echarts.init(document.getElementById("codeStatistics"));
					let option = {
						title:{
							text:"扫码量",
						textStyle: {
							color:['white'],
							fontSize: 14,
						},
						top: 10
					},
					// tooltip:{},
					// legend:{},
					xAxis:{
						data: this.monthData,
						axisLabel: {
							color: ['black'],
							fontSize: 10,
							interval: 0
						}
					},
					yAxis:{
						axisLabel: {
							color: ['black'],
							fontSize: 10,
						}
					},
					grid:{
						top:30,
						width:"auto",
						height: "70%"
					},
					series:[{
						name:'扫码量',
						type:"bar",
						data:this.scanCodeData,
						// data:[10,33,54,42,26,15,52,48,25,26,42,25],
						label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#555'
								}
							},
					}]
					};
					myEchart.setOption(option);
					// console.log(option,'市场洞察')
				})
			},
			//切换新增企业图
			addEnterprise(){
				//新增月企业数量统计图
				// axios.post("http://192.168.0.148:8880/usercenter/company/newCompanys").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/usercenter/company/newCompanys").then((res) =>{
					// console.log(res.reverse());
					let resData = res.data.data
					this.echartsDataNewqiye = resData.reverse()
				})
				let myChart = echarts.init(document.getElementById('myCharts'))
				myChart.setOption({
                    tooltip: {},
                    xAxis: {
                        data: this.monthData
                    },
                    yAxis: {},
                    series: [{
                        type: 'line',
                        data: this.echartsDataNewqiye
                    }]
                });
			},
			//切换新增用户图
			addUser(){
				//新增月用户数量统计图
				// axios.post("http://192.168.0.148:8880/usercenter/user/newUsers").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/usercenter/user/newUsers").then((res) =>{
					// console.log(res.reverse());
					let resData = res.data.data
					this.echartsDataYueUser = resData.reverse()
				})
				let myChart = echarts.init(document.getElementById('myCharts'))
				myChart.setOption({
                    tooltip: {},
                    xAxis: {
                        data: this.monthData
                    },
                    yAxis: {},
                    series: [{
                        type: 'line',
                        data: this.echartsDataYueUser
                    }]
                });
			},
			//切换累计企业图
			cumEnterprise(){
				//累计企业数量统计图
				// axios.post("http://192.168.0.148:8880/usercenter/company/cumCompanys").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/usercenter/company/cumCompanys").then((res) =>{
					// console.log(res.reverse());
					let resData = res.data.data
					this.echartsDataqiye = resData.reverse()
				})
				let myChart = echarts.init(document.getElementById('myCharts'))
				myChart.setOption({
                    tooltip: {},
                    xAxis: {
                        data: this.monthData
                    },
                    yAxis: {},
                    series: [{
                        type: 'line',
                        data: this.echartsDataqiye
                    }]
                });
			},
			//切换累计用户图
			cumUser(){
				//累计用户数量统计图
				// axios.post("http://192.168.0.148:8880/usercenter/user/cumUsers").then((res) =>{
				axios.post("http://grove.cpzsyun.com:81/api/usercenter/user/cumUsers").then((res) =>{
					// console.log(res.reverse());
					let resData = res.data.data
					this.echartsDatauser = resData.reverse()
				})
				let myChart = echarts.init(document.getElementById('myCharts'))
				myChart.setOption({
                    tooltip: {},
                    xAxis: {
                        data: this.monthData
                    },
                    yAxis: {},
                    series: [{
                        type: 'line',
                        data: this.echartsDatauser
                    }]
                });
			}
        }

    }
</script>

<style scoped lang="less">
.list .el-col{ margin-bottom: 20px; height: 346px;}
.list .el-col .el-card{ height: 100%;}
.noBoder .el-card__header{ border-bottom: 0; padding: 18px 20px 0px;}
.box-card .text{ line-height: 30px; font-size: 12px; position: relative;}
.box-card .item font{ position: absolute; right: 5px;}
.listCard .el-col{ margin-bottom: 20px; height: 250px;}
.listCard1 .el-col{ margin-bottom: 20px; height: 150px;}
.listCard .el-col .el-card{ height: 100%;}
.listCard1 .el-col .el-card{ height: 100%;}
.demo-color-box{
    float: left;
    width: 25%;
    padding: 0 10px 10px;
    height: 90px;
    line-height: 24px;
    color: #fff;
    .el-col{
        height: 100%;
        color: #606266;
        font-size: 14px;
        p{
            color: #303133;
            font-weight: 600;
        }
    }
}
.userimg{
	width: 100%;
	height: 75px;
	background-image: url(../../../../assets/img/user-manual.png);
	background-size: 100% 100%;
}
.topNum{
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
	.item{
		width: 24%;
		text-align: center;
		height: 150px;
		background-color: white;
	}
}
</style>

